<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>湖南省自来水公司营销管理信息系统</title>

	<link rel="stylesheet" href="./css/reset.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="./css/text.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="./css/form.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="./css/buttons.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="./css/grid.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="./css/layout.css" type="text/css" media="screen" title="no title" />

	<link rel="stylesheet" href="./css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="./css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="./css/plugin/facebox.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="./css/plugin/uniform.default.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="./css/plugin/dataTables.css" type="text/css" media="screen" title="no title" />

	<link rel="stylesheet" href="./css/custom.css" type="text/css" media="screen" title="no title">
	<script type="text/javascript" src="/js/vue3.js"></script>
	<script type="text/javascript" src="/js/axios.js"></script>
</head>

<body>

<div id="wrapper">



	<div id="header">

		<div class="content_pad">
			<h1><a href="./workspace.html">湖南省自来水公司营销管理信息系统</a></h1>

			<ul id="nav">

				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-wrench"></span>业扩工程</a>

					<div class="nav_menu">
						<ul>
							<li><a href="./page/be__request.html">01 用户申请</a></li>
							<li><a href="./page/be__audit.html">02 初步审核</a></li>
							<li><a href="./page/be__pay.html">03 交施工费</a></li>
							<li><a href="./page/be__billclear.html">04 水费清算</a></li>
							<li><a href="./page/be__contract.html">05 供水协议</a></li>
							<li><a href="./page/be__working.html">06 施工竣工</a></li>
							<li><a href="./page/be__open.html">07 通水停水</a></li>
							<li><a href="./page/be__save.html">08 档案存档</a></li>
							<li><a href="./page/be_order.html">工单管理</a></li>
							<li><a href="./page/be_abort.html">终止工单</a></li>
							<li><a href="./page/be_reportProgress.html">业扩工程进度</a></li>
							<li><a href="./page/be_reportMoney.html">业扩收费报表</a></li>
						</ul>

					</div>
				</li>

				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-person"></span>用户管理</a>

					<div class="nav_menu">
						<ul>
							<li><a href="./page/user_search.html">用户查询</a></li>
							<li><a href="./page/user_add.html">快捷新户</a></li>
							<li><a href="./page/user_changeName.html">快捷过户</a></li>
							<li><a href="./page/user_changeBank.html">快捷代扣</a></li>
							<li><a href="./page/user_changeMeter.html">快捷换表</a></li>
							<li><a href="./page/user_changeFormula.html">快捷重签</a></li>
							<li><a href="./page/user_delete.html">快捷销户</a></li>
							<li><a href="./page/user_reportShortcut.html">快捷操作记录</a></li>
							<li><a href="./page/user_docNum.html">档案号管理</a></li>
							<li><a href="./page/user_sendMsg.html">短信群发</a></li>
						</ul>

					</div>
				</li>

				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-pencil"></span>抄表管理</a>

					<div class="nav_menu">
						<ul>
							<li><a href="./page/rd_volume.html">表册管理</a></li>
							<li><a href="./page/rd_init.html">抄表初始化</a></li>
							<li><a href="./page/rd_task.html">任务分配</a></li>
							<li><a href="./page/rd_enter.html">抄表录入</a></li>
							<li><a href="./page/rd_audit.html">抄表审核</a></li>
							<li><a href="./page/rd_reportReading.html">抄表情况查询</a></li>
							<li><a href="./page/rd_reportVolumeReading.html">抄表统计报表</a></li>
							<li><a href="./page/rd_reportZero.html">零吨位用户查询</a></li>
							<li><a href="./page/rd_reportMaxValue.html">最大码值修正记录</a></li>
							<li><a href="./page/rd_reportCPreAmount.html">底码修正记录</a></li>
							<li><a href="./page/rd_reportMeterCheck.html">水表周检报表</a></li>
						</ul>

					</div>
				</li>

				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-star"></span>收费管理</a>

					<div class="nav_menu">
						<ul>
							<li><a href="./page/pay_window.html">窗口收费</a></li>
							<li><a href="./page/pay_batch.html">批量收费</a></li>
							<li><a href="./page/pay_invoiceReprint.html">发票补开/作废</a></li>
							<li><a href="./page/pay_reportDebts.html">欠费报表</a></li>
							<li><a href="./page/pay_reportPay.html">收费情况报表</a></li>
							<li><a href="./page/pay_reportMonthRecycle.html">月资金回收情况报表</a></li>
							<li><a href="./page/pay_reportBalance.html">用户预收情况报表</a></li>
							<li><a href="./page/pay_reportWaterType.html">各类用水统计总表</a></li>
						</ul>

					</div>
				</li>

				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-script"></span>发票管理</a>

					<div class="nav_menu">
						<ul>
							<li><a href="./page/inv_invoiceManage.html">发票总表</a></li>
							<li><a href="./page/inv_invoiceIn.html">发票入库</a></li>
							<li><a href="./page/inv_invoiceOut.html">发票出库</a></li>
							<li><a href="./page/inv_invoiceArchive.html">发票交票</a></li>
							<li><a href="./page/inv_invoiceReportOut.html">发票出库情况查询</a></li>
							<li><a href="./page/inv_invoiceReportEmp.html">收费人员发票查询</a></li>
							<li><a href="./page/inv_invoiceReportArchive.html">发票交票情况查询</a></li>
							<li><a href="./page/inv_invoiceReportUse.html">发票使用情况查询</a></li>
							<li><a href="./page/inv_invoiceReportMoneySum.html">销账汇总报表</a></li>
							<li><a href="./page/inv_invoiceReportMoneyDetail.html">销账明细报表</a></li>
						</ul>
					</div>
				</li>

				<li class="nav_dropdown nav_icon">
					<a href="javascript:;"><span class="ui-icon ui-icon-gear"></span>系统设置</a>

					<div class="nav_menu">
						<ul>
							<li><a href="./page/sys_area.html">抄表辖区</a></li>
							<li><a href="./page/sys_meterType.html">水表型号</a></li>
							<li><a href="./page/sys_dept.html">部门管理</a></li>
							<li><a href="./page/sys_emp.html">员工管理</a></li>
							<li><a href="./page/sys_menupower.html">菜单权限设置</a></li>
							<li><a href="./page/sys_areapower.html">辖区权限设置</a></li>
							<li><a href="./page/sys_waterType.html">用水类型设定</a></li>
							<li><a href="./page/sys_surcharge.html">附加费设定</a></li>
							<li><a href="./page/sys_flow.html">流程配置</a></li>
						</ul>

					</div>
				</li>

				<li class="nav_current nav_dropdown nav_icon_only">
					<a href="javascript:;">&nbsp;</a>

					<div class="nav_menu">
						<ul>
							<li><a href="./workspace.html">我的工作台</a></li>
							<li><a href="./page/sys_pwd.html">修改密码</a></li>
							<li><a href="/autoWater/logout">退出系统</a></li>
						</ul>
					</div> <!-- .menu -->
				</li>
			</ul>
		</div> <!-- .content_pad -->

	</div> <!-- #header -->

	<div id="masthead">
		<div>
			<span id="pagetitle"><a href="javascript:;">我的工作台</a></span>
			<span id="welcome_span">欢迎回来，{{userName}}</span>
		</div>
	</div> <!-- #masthead -->

	<div id="content" class="xgrid">
		<div id="welcome" class="x4">
			<p><strong><a href="./pages/text.html">欢迎回来, {{ userName }}</a></strong><br /></p>
			<table class="data info_table">
				<tbody>
				<tr>
					<td class="value right">{{ newUserCount }}</td>
					<td class="full">本月新增用户数</td>
				</tr>
				<tr>
					<td class="value right">{{ meterCount }}</td>
					<td class="full">本月应抄表数</td>
				</tr>
				<tr>
					<td class="value right">{{ actualMeterCount }}</td>
					<td class="full">本月实抄表数</td>
				</tr>
				<tr>
					<td class="value right">{{ waterUsage }} 吨</td>
					<td class="full">本月用水量</td>
				</tr>
				<tr>
					<td class="value right">{{ totalWaterFee }} 元</td>
					<td class="full">本月应收水费</td>
				</tr>
				<tr>
					<td class="value right">{{ actualWaterFee }} 元</td>
					<td class="full">本月实收水费</td>
				</tr>
				</tbody>
			</table>
		</div>

		<div class="x8">
			<table class="stats" data-chart="bar">
				<caption>收费情况统计图表</caption>
				<thead>
				<tr>
					<td>&nbsp;</td>
					<th v-for="data in receivableData" :key="data.date">{{ data.date }}</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<th>应收（万元）</th>
					<td v-for="data in receivableData" :key="data.month">{{ data.totalAmount }}</td>
				</tr>
				<tr>
					<th>实收（万元）</th>
					<td v-for="data in receivableData" :key="data.month">{{ data.actualAmount }}</td>
				</tr>
				</tbody>
			</table>
		</div>
		<div class="xbreak"></div> <!-- .xbreak -->
		<div class="x5 a1">
			<h2>用水类型统计</h2>
			<table class="stats" data-chart="pie">
				<caption>{{currentMonth}}用水类型占比表</caption>
				<thead>
				<tr>
					<th>&nbsp;</th>
					<th>&nbsp;</th>
				</tr>
				</thead>
				<tbody>
				<tr v-for="data in pieChartData" :key="data.costTypeCode">
					<th>{{ data.costTypeName }}</th>
					<td>{{ data.amount }}</td>
				</tr>
				</tbody>
			</table>
			<p>以上数据由系统自动生成，在本月结算之前，都不能视为正式数据，此图表仅供参考。</p>
		</div>

		<div class="x6">
			<h2>
				待处理的工单
				<span class="fright "><a href="./page/be_order.html" class="ticket closed" style="color:#fff;">更多</a></span>
			</h2>
			<table class="data support_table">
				<tbody>
				<tr @click="handleOrder(item)" v-for="(item, index) in beOrderList" :key="index">
					<td><span class="ticket responded" v-text="item.orderType==1?'新户':item.orderType==2?'分户':item.orderType==3?'过户':item.orderType==4?'代扣':item.orderType==5?'换表':item.orderType==6?'重签':'销户'"></span></td>
					<td><span class="ticket open" v-text="item.stepID==1?'初步审核':item.stepID==2?'交施工费':item.stepID==3?'水费清算':item.stepID==4?'供水协议':item.stepID==5?'施工竣工':item.stepID==6?'通水停水':item.stepID==7?'档案存档':item.stepID==8 || item.stepID==0?'完成':'终止'"></span></td>
					<td class="full"><a href="#">{{ item.address }}</a></td>
					<td class="who"><a href="#">{{ item.userName }}</a></td>
				</tr>
				</tbody>
			</table>
		</div>

		<a href="./page/error.html">出错演示页</a> |
		<a href="./page/success.html">成功演示页</a>
	</div>

	<div id="footer">
		<div class="content_pad">
			<p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>.   技术支持 <a href="#">职业教育</a>.</p>
		</div> <!-- .content_pad -->
	</div> <!-- #footer -->

</div> <!-- #wrapper -->
<script>
	Vue.createApp({
		data() {
			return {
				currentMonth:'',
				// 用户名
				userName: JSON.parse(sessionStorage.getItem("user")).empName,
				// 本月新增用户数
				newUserCount: 789,
				// 本月应抄表数
				meterCount: 23857,
				// 本月实抄表数
				actualMeterCount: 23857,
				// 本月用水量
				waterUsage: '3459391',
				// 本月应收水费
				totalWaterFee: '13459391.49',
				// 本月实收水费
				actualWaterFee: '10385394.12',
				// 收费情况统计数据
				receivableData: [],
				// 用水类型统计数据
				pieChartData: [
				],
				// 待处理工单数据
				beOrderList:[]
			};
		},
		methods:{
			//加载这个几个月的日期
			loadDate(){
				const today = new Date();
				const dateList = [];
				for(let i = 5; i >= 0; i--) {
					const month = new Date(today.getFullYear(), today.getMonth() - i);

					const dateString = `${month.getFullYear()}年${
							(month.getMonth() + 1).toString().padStart(2, '0')
					}月`;
					this.receivableData.push(dateString);
				}
				this.currentMonth = this.receivableData[this.receivableData.length - 1];
			},
			//加载收费情况统计图表
			loadReceivableData(){
				axios.post("/workspace/loadReceivableData",this.receivableData).then(resp=>{
					if (resp.data.data) {
						console.log(resp.data.data);
						this.receivableData=resp.data.data;
					}
				})
			},
			// 加载本月的数据	水费、新增用户、抄表数等
			loadDateForThisMonth(){
				axios.get("/workspace/loadDateForThisMonth").then(resp=>{
					if(resp.data.data){
						let map = resp.data.data;
						this.newUserCount = map.newUserCount?map.newUserCount:0;
						this.meterCount = map.meterCount?map.meterCount:0;
						this.actualMeterCount = map.actualMeterCount?map.actualMeterCount:0;
						this.waterUsage = map.waterUsage?map.waterUsage:0;
						this.totalWaterFee = map.totalWaterFee?map.totalWaterFee:0;
						this.actualWaterFee = map.actualWaterFee?map.actualWaterFee:0;
					}
				})
			},
			// 加载用水类型统计数据
			loadPieChartData(){
				axios.get("/workspace/loadPieChartData").then(resp=>{
					if(resp.data.data){
						this.pieChartData = resp.data.data;
					}
				})
			},
			//加载待处理工单
			loadOrder(){
				axios.get('/beOrder/loadOrder').then((response) => {
					this.beOrderList = response.data.data;
				}).catch((error) => {
					console.error(error);
				});
			},
			//待处理工单地处理页面
			handleOrder(order){
				if(order.stepID===1){
					//初步审核
					location.href="/page/be__auditForm.html?order="+order.orderNo;
				}else if(order.stepID===2){
					//交施工费
					location.href="/page/be__payForm.html?order="+order.orderNo;
				}else if(order.stepID===3){
					//水费清算
					location.href="/page/be__billclearForm.html?order="+order.orderNo;
				}else if(order.stepID===4){
					//供水协议
					location.href="/page/be__contractForm.html?order="+order.orderNo;
				}else if(order.stepID===5){
					//施工竣工
					location.href="/page/be__workingForm.html?order="+order.orderNo;
				}else if(order.stepID===6){
					//通水停水
					location.href="/page/be__openForm.html?order="+order.orderNo;
				}else if(order.stepID===7){
					//档案存档
					location.href="/page/be__saveForm.html?order="+order.orderNo;
				}
			},
		},
		mounted(){
			// 加载日期 和收费情况统计图表
			this.loadDate();
			this.loadReceivableData();
			// 加载本月的数据	水费、新增用户、抄表数等
			this.loadDateForThisMonth();
			// 加载用水类型统计数据
			this.loadPieChartData();
			//加载待处理工单
			this.loadOrder();
		}
	}).mount("#wrapper");
</script>
<script src="./js/jquery/jquery-1.5.2.min.js"></script>
<script src="./js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="./js/misc/excanvas.min.js"></script>
<script src="./js/jquery/facebox.js"></script>
<script src="./js/jquery/jquery.visualize.js"></script>
<script src="./js/jquery/jquery.dataTables.min.js"></script>
<script src="./js/jquery/jquery.tablesorter.min.js"></script>
<script src="./js/jquery/jquery.uniform.min.js"></script>
<script src="./js/jquery/jquery.placeholder.min.js"></script>

<script src="./js/widgets.js"></script>
<script src="./js/dashboard.js"></script>

<script type="text/javascript">

$(document).ready ( function ()
{
	Dashboard.init ();
});

</script>

</body>

</html>
